<template>
	<view class="reservation-success">
		<view class="success-icon">
			<image src="../../static/navi/success.png" alt="预约成功" mode="aspectFit"
				style="width: 64rpx;   height: 64rpx;"></image>
			<text style="height: 30px">预约成功</text>

			<navigator url="/pages/ScanQRPersonal/ScanQRPersonal">
				<image class="qr-code-button" src="../../static/navi/QR.png" @click="previewQRCode" alt="QR Code">
				</image>
				<text>扫码入园</text>
				<text>scan the QR code to enter the park</text>
			</navigator>

		</view>
		<view class="reservation-info">
			<text class="title" style="font-size: 20px; font-weight: bold;">预约信息</text>
			<view class="info-item">
				<text>姓名：</text>
				<text>{{ userInfo.name }}</text>
			</view> <br>
			<view class="info-item">
				<text>证件类型：</text>
				<text>{{ userInfo.idType }}</text>
			</view><br>
			<view class="info-item">
				<text>证件号码：</text>
				<text>{{ userInfo.idNumber }}</text>
			</view><br>
			<view class="info-item">
				<text>手机号码：</text>
				<text>{{ userInfo.phone }}</text>
			</view><br>
			<view class="info-item">
				<text>同行儿童数：</text>
				<text>{{ userInfo.companions }}</text>
			</view> <br>
			<view class="info-item">
				<text>同行成人：</text>
				<text v-for="(companion, index) in userInfo.companions" :key="index">{{ companion }}</text>
			</view>
		</view><br><br>
		<button @click="cancelReservation" style=" background-color:#8DCB6D;">取消预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '张三',
					idType: '身份证',
					idNumber: '123456789012345678',
					phoneNumber: '13800000000',
					childCount: 2,
					companions: ['李四', '王五']
				}
			};
		},
		onLoad() {
			// 从本地存储中读取数据
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},


		methods: {
			cancelReservation() {
				// 实现取消预约的逻辑  
				uni.showModal({
					title: '提示',
					content: '确定要取消预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行取消预约的API调用  
							console.log('预约已取消');
						}
					}
				});
			}
		},
		previewQRCode() {
			uni.previewImage({
				urls: ['/static/QR.png'], // 需要是网络上可访问的URL或者已经下载到本地的文件路径列表  
				current: 0, // 当前显示图片的http链接索引  
				success: function() {
					// 预览成功  
				}
			});
		}
	};
</script>

<style>
	.reservation-success {
		padding: 20px;
	}

	.success-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.success-icon text {
		margin: 5px 0;
	}

	.reservation-info {
		font-size: 15px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.qr-code-button {
		width: 30rpx;
		height: 30rpx;
		margin-top: 0px;
		cursor: pointer;
	}
</style>